<template>
    <div class="service_contract">
      <div class="flex top">
        <div class="flex-1">
          <img class="w-100 h-100" src="../../assets/images/risk.jpg" alt="百融风控" />
        </div>
        <div class="right">
          <p class="flex flex-between align-center">
            <span style="font-size: 20px">风控账户</span>
            <span class="blue-font pointer" @click="checkRecords">购买记录</span>
          </p>
          <p class="flex flex-between align-center" style="margin: 15px 0 10px">
            <span class="color-666">二要素风控余量</span>
            <span class="color-666">{{ risk_mobile_amount }}次</span>
          </p>
          <el-button class="w-100" type="primary" style="font-size: 18px" @click="toBuy">去购买</el-button>
          <el-divider></el-divider>
          <p class="flex flex-between align-center">
            <span class="color-666">自动充值（{{
            risk_mobile_automatic == 1 ? "已开启" : "未开启"
            }}）</span>
            <span class="blue-font pointer" @click="autoRecharge">{{
            risk_mobile_automatic == 1 ? "关闭" : "开启"
            }}</span>
          </p>
          <el-tag class="w-100 text-center" type="warning">开启自动充值避免风控次数不足</el-tag>
        </div>
      </div>
      <h5 class="record_header">二要素风控记录</h5>
      <div class="common_form_search">
        <el-form ref="searchForm" :inline="true" :model="searchForm">
          <el-form-item label="订单编号">
            <el-input style="width: 230px" v-model="searchForm.order_id" placeholder="请输入订单编号" clearable></el-input>
          </el-form-item>
          <el-form-item label="用户姓名">
            <el-input v-model="searchForm.user_name" placeholder="请输入用户姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="searchForm.user_mobile" placeholder="请输入手机号" clearable></el-input>
          </el-form-item>
          <el-form-item label="查询时间">
            <my-date-picker ref="myDatePicker"></my-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="search()">查询</el-button>
            <el-button size="small" @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" border>
        <el-table-column align="center" width="80" prop="order_id" label="ID" />
        <el-table-column align="center" width="190" label="订单编号">
          <template slot-scope="scope">
            <span class="blue-font pointer" @click="goToOrder(scope.row.trade_no)">{{ scope.row.trade_no }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="cert_name" label="用户名" />
        <el-table-column align="center" prop="mobile" label="用户手机号" />
        <el-table-column align="center" label="查询结果" prop="agree_text">
        </el-table-column>
        <el-table-column align="center" prop="create_time" label="查询时间" />
      </el-table>
      <mobile-dialog ref="mobileDialog" :order-id="editItem.orderId"></mobile-dialog>
      <buy-dialog ref="buyDialog" dialog-title="手机二要素报告余额购买" @getList="getList" :type="12"></buy-dialog>
      <recharge-dialog ref="rechargeDialog" dialog-title="手机二要素报告自动充值" @getList="getList" :type="12"></recharge-dialog>
      <custom-page ref="customPage" :total="total" @getList="getList"></custom-page>
    </div>
  </template>
  
  <script>
  import {
    getShopRiskMobileCreditList,
    getShopMobileCreditCreditStuatus,
    riskMobileCreditAutoRecharge
  } from '@/api/marketing'
  import customPage from '@/components/customPage'
  import myDatePicker from '@/components/myDatePicker'
  import buyDialog from './components/buy'
  import rechargeDialog from './components/recharge'
  import mobileDialog from './components/mobileDialog'
  export default {
    components: { customPage, myDatePicker, buyDialog, rechargeDialog,mobileDialog },
    data() {
      return {
        tableData: [],
        total: 0,
        searchForm: {
          order_id: '',
          user_name: '',
          user_mobile: '',
          create_time: ''
        },
        risk_mobile_automatic: 0,
        risk_mobile_amount: 0,
        disabled: false,
        editItem:{}
      }
    },
    methods: {
      checkUrl(url) {
        if (url) {
          window.open(url)
        } else {
          this.$message.warning('暂无法查看报告')
          return
        }
      },
      // 自动充值
      autoRecharge() {
        if (!this.showTip()) {
          return
        }
        if (this.risk_mobile_automatic === 1) {
          // 关闭
          this.$confirm('确认要关闭自动充值吗?', '关闭自动充值', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          })
            .then(() => {
                riskMobileCreditAutoRecharge().then((res) => {
                this.getList()
              })
            })
            .catch(() => { })
        } else {
          // 开启
          this.$refs.rechargeDialog.dialogVisible = true
        }
      },
      // 去购买
      toBuy() {
        if (!this.showTip()) {
          return
        }
        this.$refs.buyDialog.dialogVisible = true
      },
      // 查看合同购买记录
      checkRecords() {
        if (!this.showTip()) {
          return
        }
        this.$router.push({ name: "serviceMobileRecord" })
      },
      handleRadar(item){
        this.editItem = {
          orderId: item.order_id,
        }
        this.$refs.mobileDialog.dialogVisible = true
        this.getList()
      },
      // 查询
      search() {
        if (!this.showTip()) {
          return
        }
        const pickerVal = this.$refs.myDatePicker.getVal()
        if (pickerVal !== 'error') {
          this.searchForm.create_time = pickerVal
          this.$refs.customPage.page = 1
          this.getList()
        }
      },
      // 重置
      reset() {
        if (!this.showTip()) {
          return
        }
        if (this.$refs.myDatePicker) {
          this.$refs.myDatePicker.reset()
        }
        this.searchForm = {
          order_id: '',
          user_name: '',
          user_mobile: '',
          create_time: ''
        }
        this.getList()
      },
      // 获取数据
      getList() {
        const { page, pageSize } = this.$refs.customPage;
        console.log(page);
        getShopRiskMobileCreditList({
          page,
          pageSize,
          ...this.searchForm
        }).then((res) => {
          console.log(res.data);
          const { data, risk_mobile_automatic, risk_mobile_amount } = res
          this.tableData = res.data || []
          this.total = res.data.length || 0
          this.risk_mobile_automatic = risk_mobile_automatic
          this.risk_mobile_amount = risk_mobile_amount
        });
        
      },
      goToOrder(orderId) {
        if (orderId) {
          this.$router.push({ name: 'orderList', params: { orderId } })
        }
      },
      getData() {
        getShopMobileCreditCreditStuatus().then((res) => {
            this.disabled = false
            this.getList()
          })
          .catch((err) => {
            //   this.disabled = true;
          });
      },
      showTip() {
        if (this.disabled) {
          this.$message({
            message: '该店铺暂未开启百融风控, 请先开启后再查看该功能',
            type: "error"
          });
          return false
        }
        return true
      },
    },
    mounted() {
      this.getData()
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .top {
    height: 300px;
  
    .el-divider--horizontal {
      margin: 20px 0;
    }
  }
  
  .right {
    width: 345px;
    margin-left: 20px;
    padding: 20px;
    border: 1px solid #e6e6e6;
  
    p {
      line-height: 32px;
    }
  
    span {
      font-size: 16px;
    }
  
    .el-tag {
      color: #ff8500;
      margin-top: 10px;
      font-size: 14px;
    }
  }
  
  .record_header {
    padding-left: 15px;
    border-left: 3px solid $mainBlue;
    margin: 20px 0;
  }
  </style>
  